<template>
  <div class="page">
    <div class="p-20">
      <div class="fz-20 cl-white mb-20" style="letter-spacing: 5rpx">
        用户登录
      </div>

      <div class="p-20 radius bcl-white sd">
        <u--form
          ref="uForm"
          labelPosition="top"
          errorType="toast"
          :model="model"
          :rules="rules"
        >
          <u-form-item label="账号" borderBottom prop="account">
            <u--input
              placeholder="请输入账号"
              border="none"
              v-model="model.account"
            ></u--input>
          </u-form-item>

          <u-form-item label="密码" borderBottom prop="password">
            <u--input
              type="password"
              placeholder="请输入"
              border="none"
              v-model="model.password"
            ></u--input>
          </u-form-item>
        </u--form>
      </div>

      <div class="mt-50">
        <u-button class="sd" type="primary" shape="circle" @click="login">
          <span class="fz-16" style="letter-spacing: 10rpx">登录</span>
        </u-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        account: "",
        password: "",
      },

      rules: {
        account: {
          type: "string",
          required: true,
          message: "请输入账号",
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
        },
      },
    };
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  methods: {
    login() {
      this.$refs.uForm.validate().then(() => {
        uni.setStorageSync("token", "test token");
        uni.$u.toast("登录成功");

        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/index/index",
          });
        }, 2000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: calc(100rpx + var(--status-bar-height) + var(--window-top));

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(400rpx + var(--status-bar-height) + var(--window-top));
    background: linear-gradient(to bottom, #3b85c9, #1260a8);
    z-index: -1;
  }

  .sd {
    box-shadow: 0 10rpx 10rpx 0 #c4dcf4;
  }
}
</style>
